import React from 'react';
import './index.less';

import ReferSearch from 'src/hrpub/common/components/referSearch/org';
import TrnsTypeGridRef from 'src/hrhi/refer/hiref/TrnsTypeGridRef/index';
import {render, connect} from 'src/hrpub/common/frame';

import {base} from 'nc-lightapp-front';

import HeaderAction from './actions/index';
import {COMMON, getUrlParam} from "../../main/util";

import NCBackBtn from 'src/hrpub/common/components/hr-back';
import DetailAction from "../../actions/detail";

const {
    NCSelect,
    NCDatePicker
} = base;
const RangePicker = NCDatePicker.NCRangePicker;
const {NCOption} = NCSelect;

const Wrapper = render({
    actions: {
        detailAct: DetailAction,
        headerAct: HeaderAction
    },
    state: {
        startEndTime: []
    }
})(({props, state, action}) => {

    const {transfer, button, onBtnOperation, back, cardPagination} = props;
    const getStapplyModeList = action.headerAct.getStapplyModeList();
    const statusList = action.headerAct.getOrderStatusList();
    const timeRangeList = action.headerAct.getOrderTimeRangeList();
    const {createCardPagination} = cardPagination;
    let stapplyModeVal = {};
    if (~~transfer.stapplyMode) {
        stapplyModeVal.defaultValue = transfer.stapplyMode;
    }
    let key = new Date().getTime();
    let {fromScene, status} = getUrlParam(props);
    if (!fromScene && status) {
        fromScene = 'approvesce'
    }
    return (
        <div className="page-header">
            {transfer.page === COMMON.pageMain && <div className={"header page-main"}>
                <div className="header-left">
                    {transfer.oid && <ReferSearch
                        className={'xxxxx'}
                        orgVal={transfer.hrorgobj}
                        getOrgData={action.headerAct.hrorgChange}
                        showEmpty={transfer.widget ? true : false}
                        delay={true}
                        queryCondition={
                            () => {
                                return {
                                    controlType: 0
                                }
                            }
                        }
                    />}
                    <If condition={transfer.hrorgobj.refpk}>
                        <NCSelect
                            style={{
                                "max-width": '120px'
                            }}
                            showClear={false}
                            placeholder={transfer.language["gx6008-000097"]}
                            onChange={action.headerAct.changeStapplyMode}
                            data={getStapplyModeList}
                            {...stapplyModeVal}
                            key={key}
                        />
                        {TrnsTypeGridRef({
                            value: transfer.trnsType,
                            placeholder: transfer.language['gx6008-000098'],
                            onChange: action.headerAct.changeTrnsType,
                            queryCondition: () => {
                                return {
                                    trnsEvent: 3,
                                    GridRefActionExt: 'nccloud.web.hrhi.trnstype.action.sqlbuilder.TrnsTypeRefSqlBuilder'
                                }
                            }
                        })}
                        {/*单据状态*/}
                        <div className="header-middle-item-wrapper">
                            <NCSelect
                                multiple={true}
                                showClear={false}
                                style={{
                                    "max-width": '120px'
                                }}
                                placeholder={transfer.language["gx6008-000113"]}
                                onChange={action.headerAct.changeOrderStatus}
                                value={transfer.orderStatus}
                            >
                                {statusList.map((item) => {
                                    return (
                                        <NCOption
                                            key={item.key}
                                        >
                                            {item.label}
                                        </NCOption>
                                    );
                                })}
                            </NCSelect>
                        </div>
                        <div className="header-middle-item-wrapper">
                            <NCSelect
                                style={{
                                    "max-width": '120px'
                                }}
                                value={transfer.orderTimeRange}
                                showClear={false}
                                onChange={action.headerAct.changeOrderRange}
                            >
                                {Object.keys(timeRangeList).map((key) => {
                                    return (
                                        <NCOption
                                            key={key}
                                        >
                                            {timeRangeList[key]}
                                        </NCOption>
                                    );
                                })}

                            </NCSelect>
                        </div>
                        <If condition={transfer.orderTimeRange === 'custom'}>
                            <RangePicker
                                value={state.startEndTime}
                                placeholder={transfer.language['gx6008-000174']}
                                onChange={action.headerAct.changeOrderTime('startEndTime')}
                                className={'date'}
                            />
                        </If>
                    </If>
                </div>

                <If condition={transfer.hrorgobj.refpk}>
                    <div className={'page-header-right'}>
                        {button.createButtonApp({
                            area: 'head',
                            onButtonClick: (props, btncode) => {
                                onBtnOperation(props, btncode, 'head');
                            }
                        })}
                    </div>
                </If>
            </div>}
            {transfer.page === COMMON.pageDetail && <div>
                {transfer.isEditDetail ? <div className={"page-detail header"}>
                    <div></div>
                    {button.createButtonApp({
                        area: 'edit',
                        onButtonClick: (props, btncode) => {
                            onBtnOperation(props, btncode, 'edit');
                        }
                    })}
                </div> : <div className={"page-detail header"}>
                    <div className="page-detail-left">
                        {(!fromScene) &&
                        <NCBackBtn onClick={back} title={transfer.language['gx6008-000082']}></NCBackBtn>}
                        {/* 国际化处理： 返回*/}
                    </div>
                    <div className={'page-detail-right'}>
                        {button.createButtonApp({
                            area: 'detail',
                            onButtonClick: (props, btncode) => {
                                onBtnOperation(props, btncode, 'detail');
                            }
                        })}
                        {(!fromScene) && createCardPagination({
                            handlePageInfoChange: action.headerAct.pageChange
                        })}
                    </div>
                </div>}
            </div>}
        </div>
    );

});


export default connect(Wrapper);
